<template>
  <div class="content">
    <div>新增售后管理</div>
    <el-form
      ref="customer"
      :model="customer"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="客户名称" v-if="!this.$route.query.state">
        <el-input v-model="customer.customer" disabled></el-input>
        <el-button
          type="danger"
          class="btn"
          @click="setName"
          :disabled="fromState"
          >重选</el-button
        >
      </el-form-item>
      <el-form-item label="相关商品">
        <el-select
          placeholder="请选择"
          v-model="customer.a_s_goods"
          :disabled="fromState"
        >
          <el-option
            v-for="(item, index) in goods"
            :value="item.goods_name"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="反馈主题"
        class="form-1"
        prop="a_s_topic"
        :rules="{ required: true, message: '请输入反馈主题', trigger: 'blur' }"
      >
        <el-input v-model="customer.a_s_topic" :disabled="fromState"></el-input>
      </el-form-item>
      <el-form-item label="售后分类">
        <el-select
          placeholder="请选择"
          v-model="customer.a_s_type"
          :disabled="fromState"
        >
          <el-option
            v-for="(item, index) in category"
            :label="item.name"
            :value="item.id"
            :key="index"
          ></el-option>
        </el-select>
        <el-button
          type="success"
          class="btn"
          :disabled="fromState"
          @click="newCategory"
          ><i class="el-icon-menu"></i>新增</el-button
        >
      </el-form-item>
      <el-form-item label="联系人">
        <el-select
          v-model="customer.contact_id"
          :disabled="fromState"
          placeholder="请选择联系人"
          @change="ss"
        >
          <el-option
            v-for="(item, index) in contact"
            :label="item.contact_name"
            :value="item.contact_id"
            :key="index"
          ></el-option>
        </el-select>
        <el-button
          type="success"
          class="btn"
          :disabled="fromState"
          @click="jumpAddContact"
          ><i class="el-icon-menu"></i>新增</el-button
        >
      </el-form-item>
      <el-form-item
        label="反馈时间"
        prop="feedback_time"
        :rules="{ required: true, message: '请输入反馈时间', trigger: 'blur' }"
      >
        <el-col :span="11">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="customer.feedback_time"
              style="width: 200px"
              :disabled="fromState"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="附件" class="form-1">
        <el-upload
          class="upload-demo"
          action="http://192.168.221.210:8080//afterSales/updateFile"
          name="file"
          :on-success="uploadSuccess"
          :on-error="uploadFail"
        >
          <el-button size="small" type="primary" :disabled="fromState"
            >点击上传</el-button
          >
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="备注" class="form-1">
        <el-input
          type="textarea"
          v-model="customer.a_s_remark"
          :disabled="fromState"
        ></el-input>
      </el-form-item>

      <el-form-item label="售后状态" class="form-1">
        <el-radio-group v-model="customer.a_s_state">
          <el-radio :label="1">未处理</el-radio>
          <el-radio :label="2">处理中</el-radio>
          <el-radio :label="3">已处理</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="处理时间" class="form-1">
        <el-col>
          <el-form-item>
            <el-date-picker
              v-model="customer.disposal_time"
              type="datetime"
              placeholder="选择日期时间"
              :disabled="afterSaleState"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="处理结果" class="form-1">
        <el-input
          type="textarea"
          v-model="customer.a_s_results"
          :disabled="afterSaleState"
        ></el-input>
      </el-form-item>
      <el-form-item label="业务员" v-if="employeeState">
        <el-select
          v-model="customer.a_s_employee"
          placeholder="请选择业务员"
          @change="ss"
        >
          <el-option
            v-for="(item, index) in employee"
            :label="item.employee_name"
            :value="item.employee_id"
            :key="index"
          ></el-option>
        </el-select>
        <el-button type="success" class="btn" :disabled="fromState"
          ><i class="el-icon-menu"></i>新增</el-button
        >
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('customer')"
          >保存</el-button
        >
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import { timeFormat } from "../../utils/utils";
import {
  afterSaleAddAxios,
  getContactAxios,
  afterSaleReviseAxios,
  afterSaleEmpAxios,
  getGoodsAxios,
} from "../../http/apis/afterSaleApi";
export default {
  name: "AddAfterSale",
  data() {
    return {
      query: "",
      // 分类列表
      category: [
        { id: 1, name: "其他问题" },
        { id: 2, name: "操作问题" },
        { id: 3, name: "产品质量" },
      ],
      contact: [{ contact_id: 1, contact_name: "联系人1" }],
      goods: [{ goods_id: 1, goods_name: "货物1" }],
      employee: [{ employee_id: 1, a_s_employee: "业务员" }],
      customer: {
        customer_id: 4, //客户ID
        customer: "", // 客户名
        a_s_state: 1,
        a_s_goods: "",
        a_s_remark: "",
        a_s_type: "请选择",
        a_s_employee: "",
        feedback_time: "",
        disposal_time: "",
        contact_id: null,
        a_s_results: null,
        a_s_id: null,
        a_s_annex: "",
      },
      // 初始化数据
      defaultUserFormSearch: {},

      fromState: false, //true为售后状态页面
      afterSaleState: false, // 修改售后状态
      employeeState: false, // 业务员改变
      fileList: [],
    };
  },
  methods: {
    ss() {
      console.log(this.customer.a_s_employee);
    },
    //表格重置
    resetForm() {
      this.customer = JSON.parse(JSON.stringify(this.defaultUserFormSearch));
    },
    // 重选客户
    setName() {
      this.$router.push("/afterSale/afterSaleAdd");
    },
    // 跳转分类添加
    newCategory() {
      this.$router.push({
        path: "/afterSale/newAfterSale",
        query: { editInfo: this.category, info: this.query },
      });
    },
    // 点击新增跳转到新增联系人
    jumpAddContact() {
      this.$router.push({
        path: "/afterSale/cantactadd",
        query: { info: this.query },
      });
    },

    // 获取附件列表
    // handleChange(file, fileList) {
    //   this.fileList = fileList.slice(-3);
    // },
    // 覆盖element的默认上传文件
    // uploadHttpRequest(file) {
    //   let params = new FormData();
    //   params.append("file", file);
    //   console.log(file);
    //   console.log(this.fileList);
    // },
    // 需要的请求
    needAxios() {},

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.needAxios();
          this.$router.push("/afterSale/afterSaleAdd");
        } else {
          this.$alert("有必填内容未填写", "警告", {
            confirmButtonText: "确定",
            // callback: (action) => {
            //   this.$message({
            //     type: "info",
            //     message: `action: ${action}`,
            //   });
            // },
          });
          return false;
        }
      });
    },
    // 添加售后的请求
    addItem() {
      // this.customer.disposal_time = this.customer.disposal_time ? this.customer.disposal_time:null;
      // this.customer.feedback_time = timeFormat(this.customer.feedback_time);
      console.log("处理后", this.customer);
      // 新增
      afterSaleAddAxios(this.customer)
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            // this.getNewData(res.data);
            console.log(res.data);
          }
        })
        .catch((err) => {
          console.log("请求失败：", err);
        });
    },

    // 上传成功的回调函数
    uploadSuccess(res) {
      console.log("成功：", res.data);
      this.fileList.push(res.data);
      this.customer.a_s_annex = this.fileList.join("$$");
      console.log(this.customer.a_s_annex);
    },
    // 上传失败的回调函数
    uploadFail(err) {
      console.log("失败：", err);
    },

    //修改售后请求
    setItem() {
      // 修改售后的请求
      afterSaleReviseAxios(this.customer)
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            // this.getNewData(res.data);
            console.log(res.data);
          }
        })
        .catch((err) => {
          console.log("请求失败：", err);
        });
    },
    // 获取员工列表
    getEmp() {
      afterSaleEmpAxios()
        .then((res) => {
          // console.log("员工", res.data);
          if (res.data.code == 200) {
            this.employee = res.data.data;
            // this.getNewData(res.data);
          }
        })
        .catch((err) => {
          console.log("请求失败：", err);
        });
    },
    // 获取联系人列表请求
    getContact() {
      console.log("客户id", this.customer.customer_id);
      getContactAxios(this.customer.customer_id)
        .then((res) => {
          if (res.data.code == 200) {
            // console.log(res.data);
            this.contact = res.data.data;
            console.log("当前联系人", this.contact);
          }
        })
        .catch((err) => {
          console.log("请求失败：", err);
        });
    },
    // 获取商品列表请求
    getGoods() {
      console.log("客户id", this.customer.customer_id);
      getGoodsAxios(this.customer.customer_id)
        .then((res) => {
          if (res.data.code == 200) {
            console.log(res.data);
            this.goods = res.data.data;
            console.log("获取货物", this.goods);
          }
        })
        .catch((err) => {
          console.log("请求失败：", err);
        });
    },
    // 修改售后状态
    setState() {
      if (this.customer.a_s_state == 1) {
        this.customer.a_s_results = "";
        this.customer.disposal_time = "";
        this.afterSaleState = true;
      } else {
        this.afterSaleState = false;
      }
    },
    //时间转化
    formatterDate(date) {
      let result = new Date(date);
      return result;
    },
  },

  created() {
    console.log("前", this.$route);
    const Info =
      this.$route.query.info ||
      this.$route.query.editInfo ||
      this.$route.query.rowObj;
    this.query = Info;
    console.log("页面接收", this.query);

    // 所属页面判定修改

    // 修改
    if (
      this.$route.query.state == "state" ||
      this.$route.query.state == "alter"
    ) {
      this.customer = Info // 位置附上数据


      // 数据处理
      this.customer.disposal_time = this.formatterDate(
        this.customer.disposal_time
      );
      this.customer.feedback_time = this.formatterDate(
        this.customer.feedback_time
      );

      this.needAxios = this.setItem;
      console.log(this.customer);
      //状态页面
      if (this.$route.query.state == "alter") {
        console.log("修改", Info);
        this.employeeState = true;
        this.getEmp();
      }
      // 修改页面
      else if (this.$route.query.state == "state") {
        console.log("状态", this.$route.query.state);
        this.fromState = true; // true为状态修改页面
      }

      //state由对应字符改为数字
      this.customer.a_s_state =
        this.customer.a_s_state === "已处理"
          ? 1
          : this.customer.a_s_state === "处理中"
          ? 2
          : this.customer.a_s_state === "已处理"
          ? 3
          : null;
    } else {
      console.log("添加", Info);

      this.needAxios = this.addItem;
      this.customer.customer_id = Info.customer_Id; //客户id
      this.customer.customer = Info.customer_name; // 客户名称
      // this.customer.a_s_state = 1; // 默认状态
    }

    console.log(Info);
    this.setState();

    // 获取联系人
    this.getContact();
    // 获取货物
    this.getGoods();

    // this.ruleForm.contactperson = Info.connectperson;
    // this.ruleForm.receivenumber = Info.phonenumber;

    //拷贝初始化表格
    this.defaultUserFormSearch = JSON.parse(JSON.stringify(this.customer));
  },
  updated() {
    this.setState();
  },
};
</script>

<style lang="scss" scoped>
form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1100px;
  margin-top: 20px;
}
.el-form-item {
  width: 500px;
}
.el-col {
  overflow: initial;
}
.form-1 {
  width: 1000px;
}
.el-input {
  width: 200px;
}
.receiveaddress {
  width: 500px;
}

.btn {
  margin-left: 10px;
  box-sizing: border-box;
}
</style>